<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>H5移动端获奖无缝滚动动画实现</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .roll{
                margin: 100px auto;
                width: 200px;
                height: 40px;
                overflow:hidden;
                border: 1px solid aquamarine;
            }
            .roll ul{
                list-style: none;
            }
            .roll li{
                line-height:20px;
                font-size:14px;
                text-align:center;
            }
            .roll ul{
                list-style: none;
                animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
            }
        </style>
    </head>
    <body>
        <h1>H5移动端获奖无缝滚动动画实现</h1>
        <p>来源:<a href="https://juejin.im/post/5b2b4e3fe51d4558e15b97ed">https://juejin.im/post/5b2b4e3fe51d4558e15b97ed</a></p>
        <div class="roll" id="roll">
            <ul>
                 <li>第一个结构</li>
                 <li>第二个结构</li>
                 <li>第三个结构</li>
                 <li>第四个结构</li>
                 <li>第五个结构</li>
                 <li>第六个结构</li>
                 <li>第七个结构</li>
                 <li>第八个结构</li>
                 <li>第一个结构</li>
                 <li>第二个结构</li>
            </ul>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var timer,top;
            function roll(){
                var ulObj = $("#roll").find("ul"),
                    length = $("#roll li").length,  
                    liFirst = $("#roll").find("li:first");
                    liSec = liFirst.next();
                ulObj.append(liFirst.clone()).append(liSec.clone());  //把第一个第二个都添加到<ul>标签中
                clearInterval(timer);
                timer = setInterval(function(){  //设置定时器
                    var top = ulObj.css("margin-top");
                    top = +top.slice(0,-2);
                    if(top != -(20 * length)){  //获取现在的高度如果没有到最后就上移
                        top -= 40;
                        ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
                    }else{  //如果到了最后就迅速到零
                        top = 0;
                        ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top});
                        setTimeout(function(){  //这里加一个延时器，也是要放在队列最后去执行，为了避免两个动画合并
                            top -= 40;
                            ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
                        },0)
                    }
                },2000);
            }

            roll();
        </script>
    </body>
</html>